@import "mixin";
@import "footer";

@mixin confirm-btn {
  width: rem(345px);
  height: rem(49px);
  line-height: rem(49px);
  text-align: center;
  border-radius: rem(4px);
  background-color: #dc3838;
  font-size: rem(18px);
  color: #ffffff;
}

body {
  padding-top: rem(35px);
}

.switch {
  position: fixed;
  top: 0;
  width: 100%;
  height: rem(35px);
  background-color: #fafafa;
  z-index: 10;
  >.switch-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    @include border-bottom-1px(#e5e5e5);
    >li {
      flex: 1;
      height: 100%;
      line-height: rem(35px);
      text-align: center;
      font-size: 0;
      >div {
        position: relative;
        padding: 0 rem(8px);
        display: inline-block;
        line-height: rem(35px);
        font-size: rem(13px);
        color: #999999;
      }
      >.hasMsg {
        &:after {
          position: absolute;
          top: rem(6px);
          right: 0;
          content: '';
          display: inline-block;
          width: rem(6px);
          height: rem(6px);
          border-radius: 50%;
          background-color: #dc3838;
        }
      }
      &.active {
        >div {
          color: #dc3838;
          &:before {
            position: absolute;
            bottom: 0;
            left: 0;
            content: '';
            width: 100%;
            height: rem(1px);
            background-color: #dc3838;
          }
        }
      }
    }
  }
}

.notice-wrapper {
  >.notice {
    background-color: #fff;
    font-size: 0;
    @include border-bottom-1px(#e5e5e5);
    >a {
      display: block;
      padding: 0 rem(16px);
      >h3 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: rem(35px);
        font-size: rem(17px);
        color: #333333;
      }
      >.desc {
        >p {
          line-height: rem(20px);
          font-size: rem(12px);
          color: #999999;
        }
      }
      >.notice-info {
        line-height: rem(24px);
        font-size: rem(12px);
        color: #999999;
        >.notice-date {
          margin-right: rem(10px);
        }
        >.notice-time {
          margin-right: rem(10px);
        }
        >.more {
          float: right;
          color: #666666;
        }
      }
    }
    &:last-child {
      &:after {
        display: none;
      }
    }
  }
  >.new {
    >a {
      >h3 {
        padding-left: rem(10px);
        position: relative;
        &:before {
          content: '';
          display: inline-block;
          width: rem(6px);
          height: rem(6px);
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          border-radius: 50%;
          background-color: #dc3838;
        }
      }
    }
  }
}